<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>临时文件分享</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to right, #3494e6, #ec6ead);
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        #upload-container {
            max-width: min(400px, 80%);
            width: 90%;
            padding: 25px 35px 40px 35px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        h2 {
            margin-bottom: 20px;
            color: #343a40;
        }

        #file-upload-form {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px;
            border: 2px dashed #ced4da;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        #file-upload-form:hover {
            border-color: #007bff;
        }

        label {
            margin-bottom: 8px;
            color: #495057;
        }

        #file {
            display: none;
        }

        #expiration-time {
            padding: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ced4da;
            border-radius: 4px;
            text-align: center;
        }

        #buttons-container {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

        #progress-container {
            margin-top: 20px;
            display: none;
            width: 100%;
            position: relative;
        }

        #progress-bar {
            width: 0;
            height: 10px;
            background-color: #007bff;
            border-radius: 4px;
            transition: width 0.3s ease-in-out;
        }

        #response-container {
            width: 100%;
            margin-top: 20px;
            display: none;
            text-align: left;
        }

        #copy-button{
            width: 100%;
            background-color: #31cc8b;
            color: #fff;
        }

        #response {
            white-space: pre-wrap;
            word-wrap: break-word;
            background-color: #f8f9fa;
            padding: 10px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: large;
        }

        button {
            padding: 10px 20px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            transition: background-color 0.3s ease;
            margin-top: 10px;
        }

        #upload-button {
            background-color: #007bff;
            color: #fff;
        }

        #reset-button {
            background-color: #dc3545;
            color: #fff;
        }

        button:hover {
            filter: brightness(90%);
        }

        /* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fff;
            padding: 30px 70px 30px 70px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .close-btn {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
        }

        .close-btn:hover {
            filter: brightness(90%);
        }

        .file-label {
            font-size: large;
            user-select: none;
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            #upload-container {
                width: 90%;
            }

            h2 {
                font-size: 1.5rem;
            }

            #file-upload-form {
                padding: 40px;
            }

            label {
                font-size: 0.9rem;
            }

            #file {
                margin-top: 10px;
            }

            #expiration-time {
                width: 100%;
            }

            button {
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
<div id="upload-container">
    <h2>临时文件分享</h2>
    <label id="file-upload-form" for="file" ondragover="allowDrop(event)" ondrop="handleDrop(event)">
        <div class="file-label">拖拽文件 或 点击选择文件</div>
        <input type="file" id="file" name="file" onchange="handleFileChange()" required>
    </label>
    <div id="expiration-time-container">
        <input type="text" id="expiration-time" name="expirationTime" placeholder="文件过期时间（分钟）" required>
    </div>
    <div id="buttons-container">
        <button id="reset-button" type="button" onclick="resetForm()">重置</button>
        <button id="upload-button" type="button" onclick="uploadFile()">上传文件</button>
    </div>
    <div id="progress-container">
        <div id="progress-bar"></div>
    </div>
    <div id="response-container">
        <h3 style="text-align: center">上传结果</h3>
        <pre id="response"></pre>
        <button id="copy-button" onclick="copyResponse()">复制结果</button>
    </div>
</div>

<!-- Modal -->
<div id="modal" class="modal">
    <div class="modal-content">
        <p id="modal-message"></p>
        <button class="close-btn" onclick="closeModal()">关闭</button>
    </div>
</div>

<script>
    function allowDrop(event) {
        event.preventDefault();
    }

    function handleDrop(event) {
        event.preventDefault();
        var files = event.dataTransfer.files;
        handleFiles(files);
    }

    function handleFileChange() {
        var fileInput = document.getElementById('file');
        var files = fileInput.files;
        handleFiles(files);
    }

    function handleFiles(files) {
        var fileInput = document.getElementById('file');
        fileInput.files = files;

        var fileLabel = document.querySelector('#file-upload-form div');
        if (files.length > 0) {
            fileLabel.textContent = files[0].name;
        } else {
            fileLabel.textContent = '拖拽文件到这里或点击选择文件';
        }
    }

    function uploadFile() {
        var fileInput = document.getElementById('file');
        var file = fileInput.files[0];

        if (!file) {
            showModal('请选择文件');
            return;
        }

        var expirationTimeInput = document.getElementById('expiration-time');
        var expirationTime = expirationTimeInput.value;

        if (!expirationTime || isNaN(expirationTime)) {
            showModal('请输入有效的过期时间');
            return;
        }

        if(!/^[1-9]{1}[0-9]{0,}$/.test(expirationTime)){
            showModal('只允许输入正整数');
            return;
        }

        document.getElementById("progress-bar").style.backgroundColor = "#007bff";

        var formData = new FormData();
        formData.append('file', file);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'file/upload/' + expirationTime, true);

        xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                var percentComplete = (e.loaded / e.total) * 100;
                document.getElementById('progress-bar').style.width = percentComplete + '%';
            }
        };

        xhr.onload = function () {
            if (xhr.status === 200) {
                document.getElementById('response-container').style.display = 'block';
                let result = JSON.parse(xhr.responseText);
                if (result.code === 200) {
                    let url = document.URL;
                    if (url.endsWith("/")) {
                        if (result.data.startsWith("/")) {
                            document.getElementById('response').textContent = url.substring(0, url.length - 1) + result.data;
                        } else {
                            document.getElementById('response').textContent = url + result.data;
                        }
                    } else {
                        if (result.data.startsWith("/")) {
                            document.getElementById('response').textContent = url + result.data;
                        } else {
                            document.getElementById('response').textContent = url + "/" + result.data;
                        }
                    }
                    showModal("上传成功");
                } else {
                    document.getElementById("progress-bar").style.backgroundColor = "#dc3545";
                    document.getElementById('response-container').style.display = 'none';
                    showModal(result.message);
                }
            } else {
                document.getElementById("progress-bar").style.backgroundColor = "#dc3545";
                showModal('上传失败，请重试');
            }
        };

        xhr.send(formData);

        document.getElementById('progress-container').style.display = 'block';
    }

    function resetForm() {
        document.getElementById("progress-bar").style.backgroundColor = "#007bff";
        var fileLabel = document.querySelector('#file-upload-form div');
        fileLabel.textContent = '拖拽文件到这里或点击选择文件';
        document.getElementById('file').value = '';
        document.getElementById('expiration-time').value = '';
        document.getElementById('progress-container').style.display = 'none';
        document.getElementById('response-container').style.display = 'none';
    }

    function copyResponse() {
        var responseText = document.getElementById('response');
        var textarea = document.createElement('textarea');
        textarea.value = responseText.textContent;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        showModal('结果已复制到剪贴板');
    }

    function showModal(message) {
        var modal = document.getElementById('modal');
        var modalMessage = document.getElementById('modal-message');
        modalMessage.textContent = message;
        modal.style.display = 'flex';
    }

    function closeModal() {
        var modal = document.getElementById('modal');
        modal.style.display = 'none';
    }
</script>
</body>
</html>
